<!DOCTYPE html>
<html>
<head>

</head>
<body class="bgf6">
	
	<div class="main-nav">
		<div class="container">
			<ul class="nav-list clearfix">
				<li><a href="">首页</a></li>
			</ul>
		</div>
	</div>
	
	<div class="top-bar">
		<div th:include="common/commonHead :: atmBoHead"></div>
	</div>
	
	<div class="main-body pb100">
		<div class="container pt10">
			<div class="dflx sbt">
				<div class="body-left bgff">
					<div th:include="common/commonLeft :: atmBoLeft"></div>
				</div>
				
				<div id="atmBoApp" class="body-right">
					<div class="bread-nav bgff">
						<ul class="dflx">
							
						</ul>
					</div>
					
					<div class="bgff mt10 pb20 edit-mode">
						<div class="wrap">
							
                            <div class="box">
                            	<div class="box-title"><span>分配角色权限</span></div>
                            	<div class="mt20 f14">
                            		<div class="two">
                            			<span class="title"><i class="cred">*</i> 角色名</span>
	                					<div class="content">
											<el-select v-model="selRoleId" placeholder="请选择角色">
												<el-option
														v-for="item in allRoles"
														:key="item.id"
														:label="item.roleValue"
														:value="item.id">
												</el-option>
											</el-select>
	                					</div>

	                        			<span class="title">菜单权限</span>
	                					<div class="content">

											<el-tree
													:data="allMenus"
													show-checkbox
													ref="tree"
													node-key="id"
													:props="defaultProps">
											</el-tree>

										</div>
                            		</div>

                            	</div>
                            </div>
                            
                            <div class="tc mt40">
                            	<button type="button" class="btn btn-primary f12" @click="addRolePower"> 创建 </button>
                            </div>
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	

	<script>

		var app = new Vue({
			el : '#atmBoApp',
			data : {
				allRoles : [],
				selRoleId : '',
				allMenus : [],
				defaultProps: {
					children: 'child',
					label: 'powerValue'
				}
			},

			created : function() {
				//加载所有的角色
				this.loadRoles();
				this.loadAllMenu();
			},

			methods : {
				addRolePower : function () {
					var that = this;
					var selMenus = this.$refs.tree.getCheckedNodes();
					var selPowerIds = [];

					for (var i=0; i<selMenus.length; i++) {
						var menu = selMenus[i];
						selPowerIds.push(menu.id);
						if (menu.child == null) {
							selPowerIds.push(menu.parentId);
						}
					}

					$.ajax({
						type : 'POST',
						dataType : 'JSON',
						url : '/power/addRolePower',
						data : {
							roleId : that.selRoleId,
							powerIds : selPowerIds
						},
						success : function (result) {
							if (result.code != 1000){
								alert(result.message);
								return;
							}

							alert('添加成功');
						}
					});
				},

				loadAllMenu : function() {
					var that = this;
					$.ajax({
						type : 'POST',
						dataType : 'JSON',
						url : '/power/loadAllMenu',
						data : {
						},
						success : function (result) {
							if (result.code != 1000){
								alert(result.message);
								return;
							}
							that.allMenus = result.data;
						}
					});
				},

				loadRoles : function () {
					var that = this;

					$.ajax({
						type : 'POST',
						dataType : 'JSON',
						url : '/role/loadAllRole',
						data : {
						},
						success : function (result) {
							if (result.code != 1000){
								alert(result.message);
								return;
							}
							that.allRoles = result.data;
						}
					});
				}
			}
		});




	</script>
</body>
</html>
